<template>
  <Card title="取消政策">
    <DescriptionsItem label="是否支持">{{
      info.support_cancel == 1 ? "支持" : "不支持"
    }}</DescriptionsItem>
    <DescriptionsItem label="取消审核" v-if="info.manual_check_time > 0">{{
      `取车前${info.manual_check_time}小时，需要商家进行人工审核`
    }}</DescriptionsItem>
    <view class="tips-table" v-if="info.support_cancel">
      <view class="line"></view>
      <view class="tips-table-q">
        <view>取消时间</view>
        <view>扣费标准</view>
        <view class="line-i"></view>
        <view class="line-g"></view>
      </view>
      <view
        class="tips-table-w"
        v-for="(i, indexs) in cancelRules"
        :key="indexs"
      >
        <view>{{ getCancelRuleShow(i) }}</view>
        <view>
          <template v-if="i.num == 0">
            <view class="free-cancel">
              免费取消
            </view>
          </template>
          <template v-else>
            {{ info.cancel_type == 1 ? `订单费用${i.num}%` : `${i.num}元` }}
          </template>
        </view>
        <view class="line-i"></view>
        <view class="line-g"></view>
      </view>
    </view>
  </Card>
</template>
<script>
import Card from "./card.vue";
import DescriptionsItem from "./descriptionsItem.vue";
import dayjs from "dayjs";
export default {
  data() {
    return {};
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // "2024-07-07 10:30:00"
    car_use_time: {
      type: String,
      default: '',
    }
  },
  computed: {
    cancelTypeName() {
      return this.dictName(this.info.cancel_type, "CancelTypeEnum");
    },
    cancelRules() {
      let rules = this.info.cancel_rules
      if (rules[0].time == -999999) {
        let first = rules.shift()
        rules.push(first)
      }
      return rules
    }
  },
  components: {
    Card,
    DescriptionsItem,
  },
  methods: {
    getCancelRuleShow(item) {
      const hour = item.time
      const startTimeDayjsInstance = dayjs(this.car_use_time)
      if (hour == -999999) {
        return startTimeDayjsInstance.format('YYYY-MM-DD HH:mm') + '后'
      } else {
        return startTimeDayjsInstance.subtract(hour, 'hour').format('YYYY-MM-DD HH:mm') + '前'
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.tips-table {
  width: 100%;
  border: 2rpx solid #edf0f4;
  margin-top: 16rpx;
  position: relative;
  font-size: 24rpx;
  color: #55585f;
  .tips-table-q {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #f6f7fb;
    color: #212329;
    font-weight: 700;
    view:nth-child(1),
    view:nth-child(2) {
      width: 50%;
      text-align: center;
      padding: 20rpx 24rpx;
    }
    .line-i {
      width: 2rpx;
      height: 100%;
      transform: scaleX(0.5);
      background: #ebedf0;
      position: absolute;
      top: 0;
      left: 50%;
    }
    .line-g {
      width: 100%;
      height: 2rpx;
      transform: scaleY(0.5);
      background: #ebedf0;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  .tips-table-w {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    view:nth-child(1),
    view:nth-child(2) {
      width: 50%;
      text-align: center;
      padding: 20rpx 24rpx;
    }
    .line-i {
      width: 2rpx;
      height: 100%;
      transform: scaleX(0.5);
      background: #ebedf0;
      position: absolute;
      top: 0;
      left: 50%;
    }
    .line-g {
      width: 100%;
      height: 2rpx;
      transform: scaleY(0.5);
      background: #ebedf0;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .t-blue {
      color: #2f86f6;
      font-weight: 700;
    }
    .free-cancel {
      color: #81b39a;
      width: 100% !important;
      padding: 0 !important;
    }
  }
}
</style>
